<template>
  <div class="pieChartEcahrts-box">
    <!-- 对比图 -->
    <div
      ref="myChartsRef"
      :style="{ height: height, width: width }"
      class="echarts"
    ></div>
  </div>
</template>
<script setup>
import { nextTick } from "vue"
const emit = defineEmits(["click_Fun"])
const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties

const props = defineProps({
  width: {
    default: "100%",
    type: String
  },
  height: {
    default: "100%",
    type: String
  },
  contrastObj: {
    type: Object
  }
})

const myChartsRef = ref()

// 渲染echarts
const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(myChartsRef.value)
  if (myChart) {
    myChart.dispose()
  }
  myChart = $echarts.init(myChartsRef.value)

  let option = {
    grid: props.contrastObj.grid,
    xAxis: {
      show: false,
      type: "value",
      boundaryGap: [0, 0]
    },
    yAxis: [
      {
        type: "category",
        data: [""],
        axisLine: { show: false },
        axisTick: [
          {
            show: false
          }
        ]
      }
    ],
    series: [
      {
        name: "",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: "rgba(83, 202, 255)",
            borderColor: "#fff"
          }
        },
        barWidth: fontSize(30),
        data: props.contrastObj.data
      },
      {
        name: "女生",
        type: "bar",
        barWidth: fontSize(30), 
        barGap: "-100%",
        data: [100],
        itemStyle: {
          normal: {
            color: "rgba(255, 167, 38)",
            borderWidth: 1,
            borderColor: "#fff",
            barBorderRadius: 30
          }
        }
      }
    ]
  }

  setTimeout(() => {
    myChart.resize()
  }, 1000)
  myChart.setOption(option)
}

onMounted(() => {
  console.log(props.barChartList)

  nextTick(() => {
    initEcharts()
  })
  addEventListener("resize", () => {
    initEcharts()
  })
})

// watch(
//   () => props.option,
//   (val) => {
//     //// console.log(val);
//     nextTick(() => {
//       if (myChart.value) {
//         initEcharts()
//       }
//     })
//   },
//   {
//     deep: true
//   }
// )
</script>
<style scoped lang="less">
.pieChartEcahrts-box {
  width: 100%;
  height: 100%;
  position: relative;
  .echarts {
    width: 100%;
    height: 100%;
  }
  .BgImageBox {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 50%;
    height: 100%;
    // background-color: red;
    background: url("@/assets/TeacherInformation/BJ_HUANXINGTU2.svg") no-repeat
      center;
    background-size: 100% 100%;
  }
}
</style>
